// components/test1/test1.js
Component({
  // 组件自己的生命周期
  lifetimes: {
    // 在组件实例刚刚被创建时执行，注意此时不能调用 setData
    created() {
      console.log('created');
      // 这里不能使用setData
    },
    attached() {
      console.log('attached');
      // 在组件实例进入页面节点树时执行
      // 此时this.data已经初始化好了，可以在这里修改数据 请求接口
      this.setData({
        n1: 5
      })
    },
    // 组件渲染完成的时候
    ready() {
      console.log('ready');
    },
    //在组件实例被从页面节点树移除时执行
    detached() {
      console.log('detached');
    }
  },
  //组件里面监听到父页面的状态
  pageLifetimes: {
    show() {
      console.log('父页面show');
      this.setData({
        _rgb: {
          r: Math.floor(Math.random() * 256),
          g: Math.floor(Math.random() * 256),
          b: Math.floor(Math.random() * 256),
        }
      })
    },
    hide() {
      console.log('父页面hide');
    }
  },
  // 前提：使用了class选择器，才有必要配置
  options: {
    // isolated:默认值，代表互相隔离
    // apply-shared:父页面的样式会影响自定义的组件，但是组件的样式不会影响父页面
    // shared：双向影响
    // styleIsolation: 'shared',
    // 指定纯数据字段：指的是不用于页面展示的data的字段：
    // 性能优化
    pureDataPattern: /^_/
  },
  // properties接收外界（父页面）传过来的值
  properties: {
    max: {
      // 数据类型
      type: Number,
      // 默认值
      value: 10
    }
    // 简写
    // max: Number
  },
  data: {
    n1: 0,
    n2: 0,
    num: 0,
    count: 0,
    _rgb: {
      r: 0,
      g: 0,
      b: 0
    },
    fullColor: '0,0,0'
  },
  observers: {
    '_rgb.r,_rgb.g,_rgb.b': function (r, g, b) {
      this.setData({
        fullColor: `${r},${g},${b}`
      })
    },
    // 监听n1和n2的值的变化，函数的形参就是变化之后的值
    // 方式一：分开写
    // n1(newN1) {
    //   this.setData({
    //     num: newN1 + this.data.n2
    //   })
    // },
    // n2(newN2) {
    //   this.setData({
    //     num: newN2 + this.data.n1
    //   })
    // },
    // 方式二：
    'n1,n2': function (newN1, newN2) {
      this.setData({
        num: newN1 + newN2
      })
    }
  },
  methods: {
    changeR() {
      this.setData({
        // 可以：
        // _rgb: { ...this.data._rgb, r: 100 }
        //更推荐：
        '_rgb.r': this.data._rgb.r + 10 > 255 ? 255 : this.data._rgb.r + 10
      })
    },
    changeG() {
      this.setData({
        '_rgb.g': this.data._rgb.g + 10 > 255 ? 255 : this.data._rgb.g + 10
      })
    },
    changeB() {
      this.setData({
        '_rgb.b': this.data._rgb.b + 10 > 255 ? 255 : this.data._rgb.b + 10
      })
    },
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      })
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      })
    },

    // 点击事件
    addCount() {
      if (this.data.count >= this.properties.max) {
        return
      }
      // 访问properties中的属性：
      // 方式一：this.properties.max
      // 方式二：this.data.max
      console.log(this.properties.max);
      console.log(this.data.max);
      console.log(this.properties === this.data);// true
      this.setData({
        count: this.data.count + 1,
        // max: this.data.max + 1
        max: this.properties.max + 1
      })
      this._showCount()
    },
    // 自定义方法，建议以_区分
    _showCount() {
      wx.showToast({
        title: 'count的值是：' + this.data.count,
      })
    }
  }
})